<script setup lang="ts">
import {
  pageListExample
} from '@/api/video'
import { nextTick, reactive, computed, ref } from 'vue'
import IndexTitle from '@/pages/walls/index-title.vue'
import { onLaunch, onShareAppMessage, onShareTimeline, onLoad } from "@dcloudio/uni-app";
import { shareUtils } from '@/utils/share';
import { debounce } from 'lodash';
import useShare from '@/mixins/share';


const { getShareCover } = useShare()






const exampleList = ref([])
const status = ref('loadmore')
const queryWrapper = reactive({
  pageNumber: 1,
  pageSize: 15,
  keyword: '',
})
const totalPage = ref(0)
const loading = ref(false)

const doPageQuery = () => {
  return new Promise((resolve, j) => {
    pageListExample(queryWrapper).then((r) => {
      resolve(r)
    })
  })
}


onLoad(() => {


  loading.value = true
  doPageQuery().then((r) => {

    exampleList.value = r.items
    totalPage.value = r.pageInfo.totalPage
    if (queryWrapper.pageNumber >= totalPage.value) {
      status.value = 'nomore'
    }
  }).finally(() => {
    nextTick(() => {
      loading.value = false
    })
  })




})


const page = getCurrentPages().pop()

let path: string = page.route

const share_path = shareUtils.buildPathQuery(path)
onShareAppMessage(() => {

  const promise = new Promise(resolve => {
    getShareCover(path, null, null).then(res => {

      res.path = share_path

      debugger
      resolve(res)

    })
  })

  return {
    path: share_path,
    imageUrl: null,
    promise
  }
})



onShareTimeline(() => {

  const promise = new Promise(resolve => {
    getShareCover(path, null, null).then(res => {

      res.path = share_path

      debugger
      resolve(res)

    })
  })

  return {
    path: share_path,
    imageUrl: null,
    promise
  }
})





const handleClose = () => {

  if (loading.value == true) {
    return false
  }
  loading.value = true
  queryWrapper.pageNumber = 1
  return doPageQuery().then((r) => {
    exampleList.value = r.items
    totalPage.value = r.pageInfo.totalPage
    if (queryWrapper.pageNumber >= totalPage.value) {
      status.value = 'nomore'
    }
    nextTick(() => {
      loading.value = false
    })
  })
}

const search = debounce(() => {
  handleClose()
}, 300)

const handleLower = async () => {
  if (queryWrapper.pageNumber >= totalPage.value) {
    return
  }
  if (loading.value == true) {
    return false
  }
  loading.value = true
  queryWrapper.pageNumber++
  const { items, pageInfo } = await doPageQuery()

  totalPage.value = pageInfo.totalPage
  exampleList.value = exampleList.value.concat(items)
  if (queryWrapper.pageNumber >= totalPage.value) {
    status.value = 'nomore'
  }
  nextTick(() => {
    loading.value = false
  })
}
</script>

<template>
  <view class="layout">
    <ForOneHeader :enableBack="true" />
    <view class="input-container">
      <u-search height="70rpx" :showAction="false" :clearabled="true" placeholder="请输入视频名称"
        v-model="queryWrapper.keyword" @change="search"></u-search>
    </view>
    <MidLayout>

    </MidLayout>

    <scroll-view scroll-y="true" class="p-3" @scrolltolower="handleLower">
      <MidLayout class="p-2">
        <view class="my-grid">
          <view class="item" v-for="item in exampleList" :key="item.id" style="border-radius: 8rpx; overflow: hidden;">

            <IndexTitle :zh_text="item.video_title" :en_text="item.en_title"></IndexTitle>

            <channel-video class="video" :feed-token="item.feed_token" :autoplay="false" :muted="true" :loop="false"
              style="width: 100%;height: 932rpx;"></channel-video>

            <view class="v-line">
              <u-line></u-line>
            </view>

          </view>
        </view>

        <view class="load-more-container">
          <u-loadmore :status="status" fontSize="16" />
        </view>
      </MidLayout>
    </scroll-view>
  </view>
</template>

<style scoped lang="scss">
.item {
  // margin-top: 20rpx;
}

.drop {
  width: 100%;
}

.input-container {
  padding: 10rpx;
  box-shadow: 0 0 10rpx #333;
  margin-bottom: 15rpx;
}

.layout {
  height: 100vh;
  display: flex;
  flex-direction: column;

  .p-1 {
    height: 100%;
  }

  .p-2 {
    display: flex;
    flex-direction: column;
  }

  .p-3 {
    flex: 1;
    height: 100%;
    overflow: hidden;
  }
}

.v-title {
  // padding: 20rpx 0;
}

// .my-grid{
//   display: grid;
//   grid-template-columns: 1fr 1fr;
//   gap: 4rpx;
// }</style>
